<script setup>
import { Plus } from '@element-plus/icons-vue'
import UserHeader from '@/components/UserHeader.vue'
import { onBeforeMount, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  createEventReviewService,
  toggleEventReviewLikeService,
  getEventReviewListService,
  deleteEventReviewService
} from '@/api/EventReview'
import { formatRelativeTime, formatISOTime, formatToDateHour } from '@/utils/format'
import { uploadImageService } from '@/api/upLoadImage'
import { useUserStore } from '@/stores'
import { throttle } from 'lodash-es'
import { getSingleAlumniEventService } from '@/api/alumniEvent'
import { useRoute } from 'vue-router'

const userStore = useUserStore()
const user = userStore.user
const route = useRoute()

const previewUrlBlobList = ref([])
const fileRawList = ref([])
const imageList = ref([])
const maxImgCount = 18 // 最大图片数量
const limitSize = ref(maxImgCount) // 剩余图片数量,赋值给el-upload组件的limit属性
const deleteImage = (index) => {
  console.log('删除了第', index, '张图片')
  console.log('删除前', imageList.value)
  URL.revokeObjectURL(previewUrlBlobList.value[index])
  previewUrlBlobList.value.splice(index, 1)
  imageList.value.splice(index, 1)
  fileRawList.value.splice(index, 1)
  console.log('删除后', imageList.value)
  // 手动重置el-upload组件的内部状态
  uploadRef.value?.clearFiles()
  limitSize.value = maxImgCount - imageList.value.length
}

// 添加uploadRef引用
const uploadRef = ref(null)

const handlePreview = (file) => {
  console.log('文件', file)
  // 释放旧的URL（如果存在）
  // if (previewUrlBlob.value) {
  //   URL.revokeObjectURL(previewUrlBlob.value);
  // }
  fileRawList.value.push(file.raw)
  // // 生成临时预览URL
  const blob = URL.createObjectURL(file.raw)
  previewUrlBlobList.value.push(blob)
  imageList.value.push(blob)
  console.log('加载了本地图片链接coverImageUrl', blob)
}

const alertImageUpload = (files, uploadFiles) => {
  ElMessage.warning(
    `最多上传${maxImgCount}张图片,你还能再上传 ${maxImgCount - imageList.value.length} 张`
  )
}

const eventReviewList = ref([])
const showImageUpload = ref(false)
const params = ref({
  title: '',
  content: '',
  eventId: '',
  reviewImages: []
})
const toggleImgUpload = async () => {
  if (showImageUpload.value && imageList.value.length > 0) {
    try {
      await ElMessageBox.confirm('图片上传关闭将清除所有已添加图片，请确认', '图片上传', {
        confirmButtonText: '清除图片',
        cancelButtonText: '点错了~',
        type: 'warning',
        center: true
      })
      // 用户确认清除图片
      previewUrlBlobList.value.forEach((url) => URL.revokeObjectURL(url))
      imageList.value = []
      previewUrlBlobList.value = []
      fileRawList.value = []
      uploadRef.value?.clearFiles()
    } catch {
      // 用户取消操作，不做任何处理
      return
    }
  }
  showImageUpload.value = !showImageUpload.value
}
const handleInput = (e) => {
  params.value.content = e.target.innerText
  // console.log('输入框内容', params.value.content);
}
const handlePaste = (e) => {
  e.preventDefault()
  const text = e.clipboardData.getData('text/plain')
  params.value.content += text
  // console.log('粘贴内容', params.value.content);
  // 使用现代API替代execCommand
  const selection = window.getSelection()
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    range.deleteContents()
    range.insertNode(document.createTextNode(text))
    selection.removeAllRanges()
    selection.addRange(range)
  }
}


const showAdditionalBtn = ref() //右上角三个点
// 新增辅助函数
const calculateVisibleLines = (text) => {
  // 1. 计算显式换行符
  const explicitNewlines = (text.match(/\n/g) || []).length

  // 2. 估算自动换行行数
  const avgCharsPerLine = 31 // 假设每行大约40个字符
  const implicitNewlines = Math.ceil(text.length / avgCharsPerLine)

  // 3. 取两者中较大值
  return Math.max(explicitNewlines + 1, implicitNewlines)
}

// 处理tab栏
const tabItems = ref([]) //获取dom元素
const activeTypeTab = ref(0)
const typeTabs = ref(['最多点赞', '最新发布'])
const highlightStyle = ref({
  transform: 'translateX(43px)'
})
const handleTabChange = (index) => {
  if (activeTypeTab.value !== index) {
    activeTypeTab.value = index
    requestParams.value.sortType = index + 1

    if (tabItems.value.length > 0 && activeTypeTab.value !== null) {
      const activeTab = tabItems.value[activeTypeTab.value]
      const tabRect = activeTab.getBoundingClientRect()
      const containerRect = activeTab.parentElement.getBoundingClientRect()

      highlightStyle.value = {
        transform: `translateX(${tabRect.left - containerRect.left + (tabRect.width - 14) / 2}px)`
      }
    }
    getEventReviewListData()
  }
}

const requestParams = ref({
  eventId: '',
  page: 1,
  pageSize: 10,
  /*
 1-按点赞数降序(likeCount desc)，
  2-按时间降序(createTime desc)
  */
  sortType: 1
})

//获取评论列表
const getEventReviewListData = async () => {
  const eventId = route.params.eventId
  if (!eventId) {
    ElMessage.error('参数错误')
    return
  }
  requestParams.value.eventId = eventId
  const { data } = await getEventReviewListService(requestParams.value)
  console.log('回顾数据',data);
  eventReviewList.value = data.records.map((item) => {
    // 计算行数
    const lineCount = calculateVisibleLines(item.content)

    return {
      ...item,
      previewList: item.reviewImages.slice(0, 9),
      createTime: formatRelativeTime(item.createTime),
      showMoreContent: false,
      showToggle: lineCount > 6 // 当行数超过6行时才显示展开/收起按钮
    }
  })
}
const alumniEventData = ref({})

const getAlumniEventData = async () => {
  const { data } = await getSingleAlumniEventService(route.params.eventId)
  alumniEventData.value = data
  // console.log('活动详情数据:', data);

  // 在这里检查活动时间
  if (new Date(data.startTime) > new Date()) {
    console.log('活动尚未开始')
    ElMessage.error('活动尚未开始')
    return false // 返回false表示活动未开始
  }
  return true // 返回true表示活动已开始
}
const isEventStarted = ref(false)
onBeforeMount(async () => {
  isEventStarted.value = await getAlumniEventData()
  if (isEventStarted.value) {
    getEventReviewListData()
  }
})

/* // 实际服务器上传
const handleRealUpload = async () => {
  if (fileRawList.value.length === 0) {
    console.log('用户没有上传本地图片')
    return
  }

  // 使用 for...of 替代 forEach 以便使用 await
  let index = 0 // 添加计数器
  for (const file of fileRawList.value) {
    const formData = new FormData()
    formData.append('img', file)

    try {
      const { data } = await uploadImageService(formData)
      console.log('上传成功图片URL:', data.data.url)
      params.value.reviewImages.push(data.data.url)
      ElMessage.success(`上传第${index + 1}张图片成功`) // 使用计数器显示当前是第几张
      console.log(`上传成功！URL: ${data.data.url}`)
      index++ // 成功上传后计数器+1
    } catch (error) {
      ElMessage.error(`第${index + 1}张上传失败: ` + error.message) // 失败时也显示序号
      // 可以选择是否继续上传后续图片
      // break; // 如果上传失败就停止上传
      index++ // 即使失败也增加计数，保持序号连续
    }
  }
} */


// 实际服务器上传
const handleRealUpload = async () => {
  if (fileRawList.value.length === 0) {
    console.log('用户没有上传本地图片');
    return;
  }
  ElMessage.info(`正在上传图片`);


  // 创建索引映射，确保上传完成后按原始顺序存储
  const uploadResults = new Array(fileRawList.value.length).fill(null);

  const uploadTasks = fileRawList.value.map( async (file, index) => {
    const formData = new FormData();
    formData.append('img', file);
    
    return uploadImageService(formData)
      .then(res => {
        const { data } = res;
        uploadResults[index] = data.data.url; // 按原始索引位置存储结果
        console.log(`上传第${index + 1}张图片成功`, data.data.url);
        return { success: true, index };
      })
      .catch(error => {
        console.error(`上传第${index + 1}张图片失败`, error);
        ElMessage.error(`第${index + 1}张上传失败: ${error.message}`);
        return { success: false, index, error };
      });
  });

  try {
    await Promise.allSettled(uploadTasks);
    
    // 过滤掉失败的上传（null值），并按原始顺序添加到imageUrls
    params.value.reviewImages = uploadResults.filter(url => url !== null);
    ElMessage.success(`上传完成，共${params.value.reviewImages.length}张图片成功`);
    // 检查是否有上传失败的任务
    const failedCount = uploadResults.filter(url => url === null).length;
    if (failedCount > 0) {
      console.warn(`${failedCount}张图片上传失败`);
    }
  } catch (error) {
    console.error('上传过程中发生错误:', error);
    ElMessage.error('上传过程中发生错误');
  }
}





const maxContentLength = 1000
const publishEventReview = async () => {
  
  if (params.value.content === '') {
    ElMessage.error('请填写内容')
    return
  } else if (params.value.content.length > maxContentLength) {
    ElMessage.error(`内容不能超过${maxContentLength}字`)
    return
  }

  if (imageList.value.length > 0) {
    await handleRealUpload()
  }


  console.log('发布参数', params.value)
  const { data } = await createEventReviewService({
    content: params.value.content,
    reviewImages: params.value.reviewImages,
    eventId: route.params.eventId
  })
  console.log(data)

  ElMessage.success('发布成功')
  params.value.title = ''
  params.value.content = ''
  // 清除富文本编辑器内容
  const editor = document.querySelector('.bili-rich-textarea__inner')
  if (editor) {
    editor.innerHTML = ''
  }
  imageList.value = []
  if (previewUrlBlobList.value.length > 0) {
    previewUrlBlobList.value.forEach((url) => URL.revokeObjectURL(url))
  }
  previewUrlBlobList.value = []
  fileRawList.value = []
  uploadRef.value?.clearFiles()
  // 发布成功后切换到"最新发布"标签页
  handleTabChange(1)

}

const toggleEventReviewLike = throttle(async (reviewId) => {
  // 乐观更新：先更新UI，再发送请求
  eventReviewList.value.forEach((item) => {
    if (item.reviewId === reviewId) {
      const wasLiked = item.isLiked
      item.isLiked = !wasLiked
      item.likeCount = wasLiked ? item.likeCount - 1 : item.likeCount + 1
    }
  })
  console.log('点击了', reviewId)
  // return
  try {
    const { data } = await toggleEventReviewLikeService(reviewId)
    console.log(data)
    // 由于后端只返回成功信息，不需要处理返回数据
  } catch (error) {
    // 请求失败时回滚UI状态
    eventReviewList.value.forEach((item) => {
      if (item.reviewId === reviewId) {
        item.isLiked = !item.isLiked
        item.likeCount = item.isLiked ? item.likeCount + 1 : item.likeCount - 1
      }
    })
    console.error('点赞操作失败:', error)
  }
}, 1000) // 设置1秒的节流时间

const deleteEventReview = async (reviewId) => {
  console.log('删除了', reviewId)
  try {
    const { data } = await deleteEventReviewService(reviewId)
    console.log(data)
    ElMessage.success(data || '删除成功')
    getEventReviewListData()
  } catch (error) {
    ElMessage.error('删除失败:' + error.message)
  }
}
</script>

<template>
  <UserHeader></UserHeader>
  <div class="bg"></div>
  <div class="bgc"></div>
  <div class="bili-dyn-home--member">
    <main class="center">
      <!-- 顶部缩略内容 -->
      <section class="top_alumni_event">
        <div class="event-header">
          <h1 class="page-title">活动回顾</h1>
          <div class="top">
            <div class="left">
              <el-image
                class="event-cover"
                :src="alumniEventData.coverImageUrl"
                :preview-src-list="[alumniEventData.coverImageUrl]"
                fit="cover"
              >
                <template #error>
                  <div class="cover-error">封面加载失败</div>
                </template>
              </el-image>
            </div>

            <div class="event-info">
              <h1 class="event-title">{{ alumniEventData.eventName }}</h1>

              <el-descriptions :column="1" border>
                <el-descriptions-item label="活动时间">
                  {{ formatToDateHour(alumniEventData.startTime) }} 至
                  {{ formatToDateHour(alumniEventData.endTime) }}
                </el-descriptions-item>
                <el-descriptions-item label="活动地点">
                  {{ alumniEventData.activityLocation }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div class="bottom_info">
            <div class="event-summary">
              <h3>活动简介</h3>
              <p>{{ alumniEventData.summary }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 发布活动回顾 -->
      <section v-if="isEventStarted" class="create_section">
        <div class="bili-dyn-publishing">
          <!-- 标题 -->
          <div style="display: none" class="bili-dyn-publishing__title">
            <input
              v-model.trim="params.title"
              maxlength="20"
              placeholder="好的标题更容易获得支持，选填20字"
              class="bili-dyn-publishing__title__input"
            />

            <div class="bili-dyn-publishing__title__helper" v-show="params.title !== ''">
              <div class="bili-dyn-publishing__title__clear" @click="params.title = ''">
                <div class="bili-dyn-publishing__title__close">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 8 8"
                    width="8"
                    height="8"
                    style="width: 8px; height: 8px"
                  >
                    <path
                      d="M1.28895 1.2898733333333334C1.5818566666666654 0.9969799999999991 2.0567133333333345 0.9969799999999991 2.349603333333332 1.2898733333333334L3.9994666666666667 2.939749999999999L5.6498333333333335 1.2893266666666667C5.942750000000002 0.9964333333333324 6.4176499999999965 0.9964333333333324 6.71048333333333 1.2893266666666667C7.00351666666667 1.5822166666666677 7.00351666666667 2.0570899999999996 6.71048333333333 2.3499799999999986L5.060116666666667 4.0004L6.710050000000003 5.650416666666669C7.003083333333336 5.943250000000003 7.003083333333336 6.418149999999997 6.710050000000003 6.7109833333333295C6.417216666666663 7.0039 5.942316666666663 7.0039 5.6494 6.7109833333333295L3.9994666666666667 5.06105L2.3500533333333333 6.710533333333332C2.057143333333334 7.0033666666666665 1.5822900000000004 7.0033666666666665 1.28938 6.710533333333332C0.996489999999999 6.4175 0.996489999999999 5.942716666666669 1.28938 5.649883333333336L2.938816666666666 4.0004L1.28895 2.3505266666666653C0.9960566666666673 2.0576366666666663 0.9960566666666673 1.5827633333333344 1.28895 1.2898733333333334z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </div>
              </div>
              <div class="bili-dyn-publishing__title__indicator">{{ params.title.length }}</div>
            </div>
          </div>

          <!-- 输入 -->
          <div class="bili-dyn-publishing__input">
            <div class="bili-rich-textarea" style="max-height: 180px">
              <div
                class="bili-rich-textarea__inner"
                contenteditable="true"
                @input="handleInput"
                @paste="handlePaste"
                placeholder="有什么想和大家分享的？"
                style="font-size: 15px; line-height: 24px; min-height: 24px"
              ></div>
            </div>
          </div>
          <!-- 隐藏的图片区域 -->
          <div class="bili-dyn-publishing__image-upload" v-show="showImageUpload">
            <div class="bili-pics-uploader">
              <div class="bili-pics-uploader__content">
                <!-- 显示每一张缩略图 -->
                <!--   <div class="bili-pics-uploader__item success" draggable="false" style="">
                  <!~~  删除按钮 ~~>
                  <div class="bili-pics-uploader__item__remove"></div>
                  <div class="bili-pics-uploader-item-preview" status="SUCCESS" msg="">
                    <div class="bili-pics-uploader-item-preview__pic"
                      style="background-image: url(https://img2.baidu.com/it/u=2172943014,2682558540&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500);">
                    </div>
                    <div class="bili-pics-uploader-item-preview__progress" style="display: none;">
                      <div class="bili-pics-uploader-item-preview__progress__stage" style="width: 100%;"></div>
                    </div>
                  </div>
                </div>-->
                <div
                  v-for="(item, index) in imageList"
                  :key="index"
                  class="bili-pics-uploader__item success"
                  draggable="false"
                  style=""
                >
                  <!--  删除按钮 -->
                  <div class="bili-pics-uploader__item__remove" @click="deleteImage(index)"></div>
                  <div class="bili-pics-uploader-item-preview" status="SUCCESS" msg="">
                    <div
                      class="bili-pics-uploader-item-preview__pic"
                      :style="{ 'background-image': 'url(' + item + ')' }"
                    ></div>
                    <div class="bili-pics-uploader-item-preview__progress" style="display: none">
                      <div
                        class="bili-pics-uploader-item-preview__progress__stage"
                        style="width: 100%"
                      ></div>
                    </div>
                  </div>
                </div>

                <!-- 添加按钮  -->
                <div class="bili-pics-uploader__add" v-show="imageList.length < 18">
                  <el-upload
                    ref="uploadRef"
                    multiple
                    class="preview_box"
                    :limit="limitSize"
                    accept="image/*"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handlePreview"
                    :on-exceed="alertImageUpload"
                  >
                    <template #trigger>
                      <div class="upload-area">
                        <div class="upload-placeholder">
                          <el-icon :size="30">
                            <Plus />
                          </el-icon>
                        </div>
                      </div>
                    </template>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部工具栏 -->
          <div class="bili-dyn-publishing__control">
            <!-- 左侧工具栏  -->
            <div class="bili-dyn-publishing__tools">
              <!-- 图片按钮 -->
              <div @click="toggleImgUpload" class="bili-dyn-publishing__tools__item pic active">
                <svg
                  style="width: 24px; height: 24px"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                >
                  <path
                    d="M8.5 8.47247C7.93252 8.47247 7.4725 8.93249 7.4725 9.49997C7.4725 10.06746 7.93252 10.52745 8.5 10.52745C9.06747 10.52745 9.5275 10.06746 9.5275 9.49997C9.5275 8.93249 9.06747 8.47247 8.5 8.47247zM6.0275 9.49997C6.0275 8.13444 7.13448 7.02746 8.5 7.02746C9.86552 7.02746 10.9725 8.13444 10.9725 9.49997C10.9725 10.86545 9.86552 11.97245 8.5 11.97245C7.13448 11.97245 6.0275 10.86545 6.0275 9.49997z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M12 4.99756C9.48178 4.99756 7.283 5.12566 5.73089 5.25153C4.65221 5.339 3.81611 6.16303 3.72 7.23205C3.60607 8.49931 3.5 10.1705 3.5 11.9976C3.5 13.82465 3.60607 15.4958 3.72 16.7631C3.81611 17.8321 4.65221 18.65615 5.73089 18.7436C7.283 18.8695 9.48178 18.9976 12 18.9976C14.5185 18.9976 16.7174 18.8694 18.2696 18.74355C19.3481 18.6561 20.184 17.8323 20.2801 16.76355C20.394 15.49685 20.5 13.82595 20.5 11.9976C20.5 10.16915 20.394 8.49828 20.2801 7.23156C20.184 6.16281 19.3481 5.33903 18.2696 5.25156C16.7174 5.12569 14.5185 4.99756 12 4.99756zM5.60965 3.75644C7.19232 3.6281 9.43258 3.49756 12 3.49756C14.5677 3.49756 16.8081 3.62812 18.3908 3.75647C20.1881 3.90224 21.6118 5.2923 21.7741 7.09724C21.8909 8.39641 22 10.11355 22 11.9976C22 13.88155 21.8909 15.5987 21.7741 16.8979C21.6118 18.7028 20.1881 20.0929 18.3908 20.23865C16.8081 20.367 14.5677 20.4976 12 20.4976C9.43258 20.4976 7.19232 20.367 5.60965 20.2387C3.81206 20.0929 2.38831 18.7025 2.22603 16.8974C2.10918 15.5977 2 13.8803 2 11.9976C2 10.1148 2.10918 8.39738 2.22603 7.09774C2.38831 5.29263 3.81206 3.90221 5.60965 3.75644z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M15.8624 13.5532C15.4524 13.1431 14.78755 13.1431 14.37745 13.55315L12.3451 15.58555C11.4912 16.43945 10.1065 16.43915 9.25299 15.5847C8.91511 15.2465 8.36696 15.24635 8.02887 15.5844L6.5303 17.08275C6.23739 17.3756 5.76251 17.3756 5.46964 17.0827C5.17676 16.7898 5.17679 16.3149 5.4697 16.022L6.96829 14.52365C7.89238 13.59965 9.39064 13.6001 10.3142 14.5246C10.58205 14.7927 11.0165 14.79285 11.28445 14.5249L13.31675 12.4925C14.31265 11.4966 15.92735 11.49665 16.9232 12.49265L18.5304 14.1001C18.82325 14.393 18.8232 14.86785 18.53025 15.16075C18.23735 15.4536 17.7625 15.4536 17.4696 15.16065L15.8624 13.5532z"
                    fill="currentColor"
                  ></path>
                </svg>
              </div>
            </div>

            <!-- 右侧发布按钮 -->
            <div class="bili-dyn-publishing__headquarters">
              <div
                title="全角字符计数为1半角字符计数为0.5，不足1时记为1"
                :class="[
                  'bili-dyn-publishing__hint',
                  { heedful: params.content.length > maxContentLength }
                ]"
              >
                {{
                  params.content.length > maxContentLength
                    ? maxContentLength - params.content.length
                    : params.content.length
                }}
              </div>
              <div class="bili-dyn-publishing__action launcher" @click="publishEventReview">
                发布
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 活动回顾列表 -->
      <section class="moments_list_section">
        <!-- tab栏 -->
        <div class="bili-dyn-list-tabs">
          <div class="bili-dyn-list-tabs__list">
            <div
              v-for="(tab, index) in typeTabs"
              :key="index"
              class="bili-dyn-list-tabs__item fs-medium"
              :class="{ active: activeTypeTab === index }"
              @click="handleTabChange(index)"
              ref="tabItems"
            >
              {{ tab }}
            </div>
          </div>
          <!-- 底部高亮小横线 -->
          <div class="bili-dyn-list-tabs__highlight" :style="highlightStyle"></div>
        </div>

        <div class="bili-dyn-list">
          <div class="bili-dyn-list__items">
            <!-- 这是每一个动态 -->
            <div
              class="bili-dyn-list__item"
              v-for="(item, i) in eventReviewList"
              :key="item.reviewId"
            >
              <div class="bili-dyn-item">
                <div class="bili-dyn-item__main">
                  <!-- 左上角头像 -->
                  <div class="bili-dyn-item__avatar">
                    <div class="bili-dyn-avatar">
                      <img :src="item.avatarUrl" alt="" />
                    </div>
                  </div>

                  <!-- 昵称和发布时间 -->
                  <div class="bili-dyn-item__header">
                    <div data-module="title" class="bili-dyn-title">
                      <span class="bili-dyn-title__text fs-large normal-vip-color">
                        {{ item.nickName }}
                      </span>
                    </div>
                    <div class="bili-dyn-item__desc">
                      <div data-module="time" class="bili-dyn-time fs-small bili-ellipsis">
                        {{ item.createTime }}
                      </div>
                    </div>
                    <div class="bili-dyn-item__more">
                      <div class="bili-dyn-more">
                        <div class="tp bili-dyn-more__btn">
                          <div @click="showAdditionalBtn = item.reviewId">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M13.7485 5.49841C13.7485 6.46404 12.9657 7.24683 12.0001 7.24683C11.0344 7.24683 10.2516 6.46404 10.2516 5.49841C10.2516 4.53279 11.0344 3.75 12.0001 3.75C12.9657 3.75 13.7485 4.53279 13.7485 5.49841ZM13.7484 18.4982C13.7484 19.4639 12.9656 20.2467 11.9999 20.2467C11.0343 20.2467 10.2515 19.4639 10.2515 18.4982C10.2515 17.5326 11.0343 16.7498 11.9999 16.7498C12.9656 16.7498 13.7484 17.5326 13.7484 18.4982ZM11.9999 13.7487C12.9656 13.7487 13.7484 12.9658 13.7484 12.0002C13.7484 11.0345 12.9656 10.2517 11.9999 10.2517C11.0343 10.2517 10.2515 11.0345 10.2515 12.0002C10.2515 12.9658 11.0343 13.7487 11.9999 13.7487Z"
                                fill="currentColor"
                              ></path>
                            </svg>
                          </div>

                          <div
                            :class="[
                              'bili-cascader',
                              'bili-dyn-more__cascader',
                              { hidden: showAdditionalBtn !== item.reviewId }
                            ]"
                            style="flex-direction: row-reverse; z-index: 2018"
                          >
                            <div class="bili-cascader__list" style="margin-right: -3px; z-index: 1">
                              <div class="bili-cascader-options">
                                <div
                                  @click="deleteEventReview(item.reviewId)"
                                  class="bili-cascader-options__item"
                                  v-if="item.userId === user.userId"
                                >
                                  <div class="bili-cascader-options__item-custom">
                                    <div>
                                      <div class="bili-cascader-options__item-label">删除</div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="bili-cascader-options__item"
                                  v-if="item.userId !== user.userId"
                                >
                                  <div class="bili-cascader-options__item-custom">
                                    <div>
                                      <div class="bili-cascader-options__item-label">取消关注</div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="bili-cascader-options__item"
                                  v-if="item.userId !== user.userId"
                                >
                                  <div class="bili-cascader-options__item-custom">
                                    <div>
                                      <div class="bili-cascader-options__item-label">举报</div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 内容 -->
                  <div class="bili-dyn-item__body">
                    <div class="bili-dyn-content">
                      <div class="bili-dyn-content__orig">
                        <div class="bili-dyn-content__orig__major suit-video-card">
                          <div class="dyn-card-opus" dyn-id="1058235772294922261">
                            <!-- 标题 -->
                            <div
                              style="display: none"
                              data-module="desc"
                              data-orig="0"
                              data-url=""
                              class="dyn-card-opus__title bili-ellipsis"
                            >
                              {{ item.title ? item.title : '' }}
                            </div>

                            <!-- 内容 -->
                            <div class="dyn-card-opus__summary jump">
                              <div class="bili-rich-text" style="font-size: 15px">
                                <div
                                  class="bili-rich-text__content"
                                  :class="{
                                    folded: !item.showMoreContent,
                                    'line--6': !item.showMoreContent
                                  }"
                                  :style="{
                                    'line-height': '25px',
                                    'max-height': item.showMoreContent ? 'none' : '171px'
                                  }"
                                >
                                  <span class="multiline_text">
                                    {{ item.content }}
                                  </span>
                                </div>
                                <div
                                  v-if="item.showToggle"
                                  @click="item.showMoreContent = !item.showMoreContent"
                                  class="bili-rich-text__action"
                                >
                                  {{ item.showMoreContent ? '收起' : '展开' }}
                                </div>
                              </div>
                            </div>

                            <!-- 底部图片 -->
                            <div class="dyn-card-opus__pics">
                              <div class="bili-album">
                                <div class="bili-album__preview grid3">
                                  <div
                                    class="bili-album__preview__picture"
                                    :class="{
                                      'total-mask': item.reviewImages.length > 9 && imgIndex >= 8
                                    }"
                                    :data-total="'+' + (item.reviewImages.length - 9)"
                                    v-for="(url, imgIndex) in item.previewList"
                                    :key="imgIndex"
                                  >
                                    <el-image
                                      :src="url"
                                      :zoom-rate="1.2"
                                      :max-scale="7"
                                      :min-scale="0.2"
                                      :preview-src-list="item.reviewImages"
                                      show-progress
                                      :initial-index="imgIndex"
                                      fit="cover"
                                    >
                                    </el-image>
                                  </div>
                                  <!-- 
                                  <div class="bili-album__preview__picture"
                                    :class="{ 'total-mask': reviewImages.length > 9 }"
                                    :data-total="'+' + (reviewImages.length - 9)">

                                    <el-image class="imgs" :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                      :preview-src-list="reviewImages" show-progress :initial-index="4" fit="cover">
                                    </el-image>

                                  </div> -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 底部评论和点赞 -->
                  <div class="bili-dyn-item__footer">
                    <!-- 评论 -->
                    <div style="display: none" class="bili-dyn-item__action">
                      <div data-module="action" data-type="comment" class="bili-dyn-action comment">
                        <svg
                          style="width: 18px; height: 18px"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 18 18"
                          width="18"
                          height="18"
                        >
                          <path
                            d="M1.5625 7.875C1.5625 4.595807499999999 4.220807499999999 1.9375 7.5 1.9375L10.5 1.9375C13.779175 1.9375 16.4375 4.595807499999999 16.4375 7.875C16.4375 11.0504 13.944675 13.6435 10.809275 13.80405C10.097025 14.722974999999998 8.920875 15.880675 7.267095 16.331325C6.9735075 16.4113 6.704762499999999 16.286224999999998 6.55411 16.092325C6.40789 15.904149999999998 6.3561 15.634350000000001 6.4652449999999995 15.383025C6.72879 14.776249999999997 6.776465 14.221025000000001 6.7340175 13.761800000000001C3.8167675 13.387125 1.5625 10.894475 1.5625 7.875zM7.5 2.9375C4.773095 2.9375 2.5625 5.148095 2.5625 7.875C2.5625 10.502575 4.61524 12.651075000000002 7.2041924999999996 12.8038C7.4305875 12.817174999999999 7.619625000000001 12.981200000000001 7.664724999999999 13.203475C7.772575 13.734575000000001 7.8012 14.405425000000001 7.5884275 15.148399999999999C8.748325 14.6682 9.606 13.759825 10.151275 13.016475C10.24445 12.889475 10.392050000000001 12.8138 10.54955 12.812275C13.253575 12.785725 15.4375 10.58535 15.4375 7.875C15.4375 5.148095 13.226899999999999 2.9375 10.5 2.9375L7.5 2.9375z"
                            fill="currentColor"
                          ></path>
                        </svg>
                        {{ item.commentCount }}
                      </div>
                    </div>
                    <!-- 点赞 -->
                    <div
                      class="bili-dyn-item__action"
                      @click="toggleEventReviewLike(item.reviewId)"
                    >
                      <div
                        class="bili-dyn-action like"
                        :class="{ active: item.isLiked }"
                        data-module="action"
                        data-type="like"
                      >
                        <!-- 未点赞的图标 -->
                        <svg
                          v-if="!item.isLiked"
                          style="width: 18px; height: 18px"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 18 18"
                          width="18"
                          height="18"
                        >
                          <path
                            d="M10.4511 2.2220125C10.218425 2.194885 10.002175 2.2953725 9.884175 2.433395C9.4264 2.9688525 9.321875 3.7501399999999996 8.978575 4.3581725C8.533574999999999 5.146395 8.1198 5.6213375 7.609775000000001 6.068507499999999C7.1751375 6.449565 6.738407499999999 6.697442499999999 6.3125 6.8050575L6.3125 14.854575C6.9198900000000005 14.868174999999999 7.572900000000001 14.876875 8.25 14.876875C9.936425 14.876875 11.367025 14.823325 12.33115 14.773699999999998C13.03235 14.737575 13.646025000000002 14.390075 13.966750000000001 13.81945C14.401900000000001 13.04535 14.9387 11.909650000000001 15.264174999999998 10.571200000000001C15.56665 9.327275 15.704699999999999 8.304325 15.766675 7.582224999999999C15.7988 7.208262500000001 15.50165 6.875019999999999 15.059999999999999 6.875019999999999L11.323274999999999 6.875019999999999C11.156575 6.875019999999999 11.000800000000002 6.791952499999999 10.907975 6.653499999999999C10.783725 6.468192500000001 10.82855 6.2670175 10.9037 6.07485C11.059 5.675084999999999 11.29355 4.9974475 11.382425000000001 4.4018275C11.470875000000001 3.80917 11.450999999999999 3.32219 11.212050000000001 2.86913C10.9571 2.3857825 10.66065 2.2464475 10.4511 2.2220125zM12.034300000000002 5.87502L15.059999999999999 5.87502C16.02035 5.87502 16.850875 6.64489 16.763 7.667825C16.697100000000002 8.435525 16.55155 9.5092 16.235825000000002 10.807500000000001C15.882625 12.259950000000002 15.3035 13.482225 14.838450000000002 14.309474999999999C14.32695 15.2194 13.377475 15.721150000000002 12.38255 15.772375C11.405125 15.822725 9.956949999999999 15.876875000000002 8.25 15.876875000000002C6.5961925 15.876875000000002 5.0846825 15.826025000000001 4.0136674999999995 15.77715C2.8370825 15.723474999999999 1.8519999999999999 14.850000000000001 1.725645 13.654824999999999C1.6404649999999998 12.849274999999999 1.5625 11.80725 1.5625 10.689375C1.5625 9.665175000000001 1.6279400000000002 8.736175 1.7045524999999997 7.998975C1.8351224999999998 6.7427075 2.9137075 5.87502 4.130655 5.87502L5.8125 5.87502C6.072015 5.87502 6.457235 5.7490675 6.9505175 5.316582499999999C7.377705000000001 4.942045 7.7193000000000005 4.5546075 8.107775 3.8665374999999997C8.492075 3.18585 8.605825 2.389785 9.124075 1.783595C9.452975 1.3988800000000001 9.99475 1.162025 10.5669 1.228745C11.16225 1.29816 11.717425 1.683875 12.09655 2.4025825000000003C12.478275 3.1262375000000002 12.474075 3.8618225 12.371500000000001 4.54938C12.302149999999997 5.0139949999999995 12.155425000000001 5.510059999999999 12.034300000000002 5.87502zM5.3125 14.82705L5.3125 6.875019999999999L4.130655 6.875019999999999C3.3792199999999997 6.875019999999999 2.77211 7.400795 2.6991975000000004 8.10235C2.6253525 8.812875 2.5625 9.70665 2.5625 10.689375C2.5625 11.762875 2.6374975 12.768475 2.7200975 13.549700000000001C2.7919925 14.229675 3.3521950000000005 14.74595 4.05924 14.778224999999999C4.4278775 14.795 4.849985 14.812050000000001 5.3125 14.82705z"
                            fill="currentColor"
                          ></path>
                        </svg>
                        <!-- 已经点赞的图标 -->
                        <svg
                          v-else
                          style="width: 18px; height: 18px"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          viewBox="0 0 18 18"
                          width="18"
                          height="18"
                        >
                          <path
                            d="M15.238949999999999 5.8749875L11.728124999999999 5.8749875C11.903625 5.509125 12.108450000000001 5.0146725 12.179124999999999 4.54079C12.225925 4.227235 12.230549999999997 3.8411524999999997 12.192600000000002 3.4729099999999997C12.155475 3.1126975 12.072274999999998 2.715405 11.909324999999999 2.4065275C11.5572 1.73896 11.07925 1.2830650000000001 10.515075 1.1730275000000001C9.9175 1.056475 9.4 1.3591199999999999 9.086975 1.832795C8.821325 2.2348025 8.71795 2.5693425000000003 8.62185 2.8804925L8.619125 2.8893475C8.526275 3.1897624999999996 8.4337 3.488995 8.19635 3.9093850000000003C7.807925000000001 4.59742 7.489369999999999 4.956485000000001 7.062139999999999 5.331055C6.807695000000001 5.5541375 6.541364999999999 5.6883925 6.3125 5.760025L6.3125 15.85475C6.9202625 15.868200000000002 7.573125 15.876800000000003 8.25 15.876800000000003C10.00675 15.876800000000003 11.4894 15.819474999999999 12.466925 15.767950000000003C13.408750000000001 15.7183 14.305975 15.243900000000002 14.795475 14.385325C15.267499999999998 13.557499999999997 15.871775 12.304749999999999 16.235825000000002 10.807475C16.577575000000003 9.40205 16.719975 8.259725 16.7778 7.4839150000000005C16.846225 6.565215 16.10015 5.8749875 15.238949999999999 5.8749875zM5.3125 15.827525L5.3125 5.8749875L3.9767325000000002 5.8749875C2.8486374999999997 5.8749875 1.8491449999999998 6.6792625 1.7212225 7.843025000000001C1.63766 8.60325 1.5625 9.5917 1.5625 10.6893C1.5625 11.876325000000001 1.6504175 12.977975 1.7415649999999998 13.801975C1.864035 14.909174999999998 2.7766325 15.718875 3.8673275 15.770325C4.28143 15.789874999999999 4.769835 15.810149999999998 5.3125 15.827525z"
                            fill="currentColor"
                          ></path>
                        </svg>

                        {{ item.likeCount }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<style lang="scss" scoped>
// 添加样式
.event-header {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .page-title {
    margin-bottom: 10px;
    color: #333;
    font-size: 24px;
  }

  .top {
    display: flex;
    gap: 24px;

    .left {
      display: flex;
      align-items: center;

      .event-cover {
        width: 360px;
        height: 200px;
        border-radius: 6px;
        flex-shrink: 0;
      }
    }

    .event-info {
      flex: 1;

      .event-title {
        margin: 0 0 16px;
        font-size: 24px;
        color: #1a1a1a;
      }
    }
  }

  .bottom_info {
    .event-summary {
      margin-top: 20px;

      h3 {
        font-weight: 700;
        // margin: 0 0 12px;
        font-size: 16px;
        color: #666;
      }

      p {
        margin: 0;
        line-height: 1.6;
        color: #4a4a4a;
      }
    }
  }
}

@media screen and (max-width: 1320px) {
  .event-header .top .left .event-cover {
    max-width: 200px;
    // height: 200px;
    border-radius: 6px;
    flex-shrink: 0;
  }
}

.cover-error {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.create_section {
  .bili-dyn-publishing {
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 20px 20px 12px;
    position: relative;
    width: 100%;

    .bili-dyn-publishing__title {
      box-sizing: border-box;
      height: 24px;
      margin-top: 6px;
      padding-right: 48px;
      position: relative;
      width: 100%;

      .bili-dyn-publishing__title__input {
        background: #fff;
        border: none;
        font-size: 15px;
        font-weight: 500;
        height: 24px;
        line-height: 24px;
        outline: none;
        width: 100%;
      }

      .bili-dyn-publishing__title__helper {
        display: flex;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;

        .bili-dyn-publishing__title__clear {
          align-items: center;
          cursor: pointer;
          display: flex;
          height: 100%;
          justify-content: center;
          width: 24px;

          .bili-dyn-publishing__title__close {
            align-items: center;
            background-color: #c9ccd0;
            border-radius: 50%;
            color: #fff;
            display: flex;
            height: 16px;
            justify-content: center;
            width: 16px;
          }
        }

        .bili-dyn-publishing__title__indicator {
          color: #9499a0;
          font-size: 13px;
          line-height: 24px;
          text-align: right;
          width: 24px;
        }
      }
    }

    .bili-dyn-publishing__input {
      margin: 4px 14px 12px 0;
      min-height: 40px;
      padding-right: 4px;
      position: relative;

      .bili-rich-textarea {
        cursor: text;
        height: 100%;
        overflow-y: auto;
        position: relative;
        width: 100%;

        .bili-rich-textarea__inner {
          word-wrap: break-word;
          background-color: #fff;
          box-sizing: border-box;
          color: #18191c;
          font-size: 14px;
          letter-spacing: 1px;
          outline: none;
          padding-right: 5px;
          position: relative;
          vertical-align: baseline;
          white-space: pre-wrap;
          width: 100%;
          word-break: break-all;

          &:empty::before {
            content: attr(placeholder);
            color: #999;
            /* 修改字体颜色 */
            // font-style: italic;
            /* 修改字体样式 */
            font-family: 'Microsoft YaHei', sans-serif;
            /* 修改字体 */
            pointer-events: none;
            //   /* 防止干扰点击 */
          }
        }
      }
    }

    .bili-dyn-publishing__image-upload {
      margin-top: 2px;

      .bili-pics-uploader__content {
        display: flex;
        flex-wrap: wrap;

        .bili-pics-uploader__item {
          background-color: #f1f2f3;
          border-radius: 4px;
          cursor: move;
          height: 92px;
          margin-bottom: 8px;
          margin-right: 7px;
          position: relative;
          width: 92px;

          .bili-pics-uploader__item__remove {
            background: url()
              50% / cover no-repeat;
            cursor: pointer;
            height: 24px;
            position: absolute;
            right: 2px;
            top: 2px;
            width: 24px;
            z-index: 2;
          }

          .bili-pics-uploader-item-preview {
            height: 100%;
            position: relative;
            width: 100%;

            .bili-pics-uploader-item-preview__pic {
              background-position: 50%;
              background-size: cover;
              border-radius: 4px;
              height: 100%;
              width: 100%;
            }
          }
        }

        .bili-pics-uploader__add {
          border: 2px dashed #e3e5e7;
          border-radius: 4px;
          cursor: pointer;
          height: 92px;
          margin-bottom: 10px;
          position: relative;
          transition: border-color 0.3s;
          width: 92px;

          &:hover {
            border-color: #80daf6;
          }

          .preview_box {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;

            :deep(.el-upload) {
              width: 100%;
              height: 100%;

              .upload-area {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .upload-placeholder {
                  display: flex;
                  align-items: center;
                  // gap: 10px;
                  justify-content: center;
                  color: #8c939d;
                }
              }
            }
          }

          /* :deep(.el-upload--picture-card) {
            width: 92px;
            height: 92px;
            line-height: 92px;
            margin-right: 8px;
            margin-bottom: 8px;
            background: #f1f2f3;
            border-radius: 4px;

            .el-icon {
              font-size: 24px;
              color: #9499a0;
            }
          }

          :deep(.el-upload-list--picture-card) {
            display: flex;
            flex-wrap: wrap;
            margin: 0;

            .el-upload-list__item {
              width: 92px;
              height: 92px;
              margin: 0 8px 8px 0;
              border-radius: 4px;
            }
          }

          .image-preview {
            position: relative;
            width: 100%;
            height: 100%;

            &:hover .el-upload-list__item-actions {
              opacity: 1;
            }
          }

          .el-upload-list__item-actions {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .6);
            opacity: 0;
            transition: opacity .3s;
          }

          .el-upload-list__item-delete {
            position: absolute;
            right: 2px;
            top: 2px;
            color: #fff;
            cursor: pointer;
          }*/
        }
      }
    }

    .bili-dyn-publishing__control {
      align-items: center;
      display: flex;
      justify-content: space-between;

      // 左侧
      .bili-dyn-publishing__tools {
        align-items: center;
        display: flex;
        position: relative;

        .bili-dyn-publishing__tools__item {
          background-repeat: no-repeat;
          background-size: contain;
          color: #9499a0;
          cursor: pointer;
          height: 24px;
          margin-left: 16px;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          width: 24px;

          &.pic {
            margin-left: 0;
          }
        }
      }

      .bili-dyn-publishing__headquarters {
        align-items: center;
        display: flex;
        justify-content: center;
        margin-left: 20px;

        .bili-dyn-publishing__hint {
          color: #9499a0;
          font-size: 14px;
          margin-right: 25px;
          position: relative;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;

          &.heedful {
            color: #f85a54;
          }
        }

        .bili-dyn-publishing__action {
          align-items: center;
          background: #00aeec;
          border-radius: 6px;
          box-sizing: border-box;
          color: #fff;
          cursor: pointer;
          display: flex;
          font-size: 14px;
          height: 32px;
          justify-content: center;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          width: 70px;

          &.launcher {
            min-width: 70px;
          }
        }
      }
    }
  }
}

.moments_list_section {
  & > div:not(:first-child) {
    margin-top: 8px;
  }

  .bili-dyn-list-tabs {
    background-color: #fff;
    border-radius: 6px;
    height: 48px;
    position: relative;
    width: 100%;

    .bili-dyn-list-tabs__list {
      display: flex;
      height: 100%;
      padding-left: 20px;

      .bili-dyn-list-tabs__item {
        align-items: center;
        color: #61666d;
        cursor: pointer;
        display: flex;
        font-weight: 400;
        height: 100%;
        justify-content: center;
        margin-right: 32px;
        position: relative;

        &.active {
          color: #00aeec;
          font-weight: 600;
        }

        &:hover {
          color: #00aeec;
        }
      }

      .fs-medium {
        font-size: 15px;
        line-height: 25px;
      }
    }

    .bili-dyn-list-tabs__highlight {
      background-color: #00aeec;
      border-radius: 1px;
      bottom: 8px;
      height: 2px;
      left: 0;
      position: absolute;
      transition: transform 0.2s;
      width: 14px;
    }
  }

  .bili-dyn-list__item {
    margin-bottom: 8px;

    .bili-dyn-item {
      -webkit-font-smoothing: antialiased;
      background-color: #fff;
      border-radius: 6px;
      box-sizing: border-box;
      font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
      font-weight: 400;
      letter-spacing: 0;
      min-width: 556px;
      position: relative;

      .bili-dyn-item__main {
        padding: 0 28px 0 88px;
        position: relative;

        .bili-dyn-item__avatar {
          align-items: center;
          display: flex;
          height: 86.4px;
          justify-content: center;
          left: 0;
          position: absolute;
          top: 0;
          width: 86.4px;
          cursor: pointer;

          .bili-dyn-avatar {
            width: 48px;
            height: 48px;

            img {
              object-fit: cover;
              border-radius: 50%;
            }
          }
        }

        .bili-dyn-item__header {
          height: 62px;
          padding-top: 16px;

          .bili-dyn-title {
            align-items: center;
            display: flex;
            height: 22px;
            margin: 1px 0 2px;
            width: -moz-max-content;
            width: -webkit-max-content;
            width: max-content;

            .bili-dyn-title__text {
              color: #18191c;
              cursor: pointer;
              font-weight: 600;
              line-height: 22px;
              transition: all 0.2s;

              &.normal-vip-color {
                color: #f69;
              }
            }

            .fs-large {
              font-size: 17px;
              line-height: 32px;
            }
          }

          .bili-dyn-item__desc {
            align-items: center;
            display: flex;
            padding-right: 120px;
            padding-top: 4px;

            .bili-dyn-time {
              -webkit-line-clamp: 1;
              color: #9499a0;
              cursor: pointer;
              line-height: 18px;
              transition: color 0.3s ease;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
              width: -moz-fit-content;
              width: -webkit-fit-content;
              width: fit-content;
            }

            .bili-ellipsis {
              -webkit-box-orient: vertical;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
            }

            .fs-small {
              font-size: 13px;
              line-height: 18px;
            }
          }

          .bili-dyn-item__more {
            opacity: 0;
            position: absolute;
            right: 16px;
            top: 30px;

            &:hover {
              opacity: 1;
            }

            .bili-dyn-more {
              border-radius: 4px;
              height: 24px;
              width: 24px;

              .bili-dyn-more__btn {
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 0;

                .bili-cascader {
                  display: flex;
                  position: absolute;

                  &.hidden {
                    display: none;
                  }
                }

                .bili-dyn-more__cascader {
                  right: 0;
                  top: 32px;

                  .bili-cascader__list {
                    position: relative;

                    .bili-cascader-options {
                      background: #fff;
                      border: 1px solid #e3e5e7;
                      border-radius: 8px;
                      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                      max-height: 500px;
                      min-width: 142px;
                      overflow-y: auto;
                      padding: 12px 0;

                      .bili-cascader-options__item {
                        box-sizing: border-box;
                        color: #61666d;
                        cursor: pointer;
                        display: flex;
                        flex-direction: column;
                        font-size: 13px;
                        justify-content: center;
                        letter-spacing: 0;
                        line-height: 18px;
                        min-height: 40px;
                        padding: 8px 27px;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        user-select: none;
                        white-space: nowrap;

                        .bili-cascader-options__item-custom {
                          align-items: center;
                          display: flex;
                          flex-wrap: nowrap;
                        }
                      }

                      .bili-cascader-options__item:not(.is-disabled):hover {
                        background-color: #9499a01a;
                      }
                    }
                  }
                }
              }

              .bili-dyn-more__btn.tp {
                color: #c9ccd0;
                height: 24px;
                right: -4px;
                top: -3px;
                width: 24px;
              }

              .bili-dyn-more__btn.tp svg {
                height: 24px;
                pointer-events: none;
                width: 24px;
              }
            }
          }
        }

        .bili-dyn-item__body {
          margin-top: 8px;

          .bili-dyn-content {
            -webkit-font-smoothing: antialiased;
            font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
            font-weight: 400;

            .bili-dyn-content__orig__additional,
            .bili-dyn-content__orig__major.gap,
            .bili-dyn-content__orig__major.suit-video-card {
              margin-top: 12px;
            }

            .dyn-card-opus {
              margin-top: -6px;

              .dyn-card-opus__summary {
                cursor: pointer;

                .bili-rich-text {
                  -webkit-font-smoothing: antialiased;
                  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
                    sans-serif !important;
                  font-weight: 400;
                  white-space: pre-wrap;
                  word-break: break-word;

                  .bili-rich-text__content {
                    color: #18191c;

                    .multiline_text {
                      white-space: pre-wrap;
                      /* 保留换行符并自动换行 */
                    }
                  }

                  .bili-rich-text__content.folded {
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }

                  .bili-rich-text__content.line--6 {
                    -webkit-line-clamp: 6;
                  }

                  .bili-rich-text__action {
                    color: #008ac5;
                    cursor: pointer;
                    display: inline-block;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    user-select: none;
                  }
                }
              }

              .dyn-card-opus__pics {
                margin-top: 12px;

                .bili-album__preview.grid3 {
                  display: grid;
                  grid-gap: 4px;
                  gap: 4px;
                  grid-template-columns: repeat(3, 1fr);
                  width: 404px;
                  /* 
                  .bili-album__preview__picture {
                    position: relative;
                  }

                  .bili-album__preview__picture {
                    background-color: #fff;
                    border-radius: 6px;
                    overflow: hidden;

                    .bili-album__preview__picture__img {
                      border-radius: 6px;
                      cursor: zoom-in;
                      height: 100%;
                      width: 100%;
                    }

                    .b-img {
                      background-color: #f1f2f3;
                      position: relative;
                      height: 100%;
                    }
                  } */

                  .bili-album__preview__picture {
                    height: 132px;
                    width: 132px;
                    background-color: #fff;
                    border-radius: 6px;
                    overflow: hidden;
                    position: relative;

                    :deep(.el-image) {
                      width: 100%;
                      height: 100%;
                    }

                    &.total-mask:after {
                      align-items: center;
                      background-color: rgba(0, 0, 0, 0.3);
                      border-radius: 4px;
                      color: #fff;
                      content: attr(data-total);
                      display: flex;
                      font-size: 16px;
                      height: 100%;
                      justify-content: center;
                      left: 0;
                      pointer-events: none;
                      position: absolute;
                      top: 0;
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }

        .bili-dyn-item__footer {
          display: flex;
          height: 50px;
          // justify-content: space-between;
          padding-right: 20px;

          .bili-dyn-item__action {
            position: relative;

            .bili-dyn-action {
              align-items: center;
              color: #61666d;
              cursor: pointer;
              display: flex;
              font-size: 13px;
              height: 100%;
              position: relative;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
              width: 104px;

              svg {
                height: 18px;
                margin-right: 4px;
                pointer-events: none;
                width: 18px;
              }
            }

            .bili-dyn-action:not(.disabled).active,
            .bili-dyn-action:not(.disabled):hover {
              color: #00aeec;
            }
          }
        }
      }
    }
  }
}

main {
  width: 560px;
  margin: 0 auto;
  // background-color: pink;
}

main section {
  width: 100%;
  margin-bottom: 8px;
}

.bili-dyn-home--member {
  padding-top: 8px;
  position: relative;

  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  min-height: 150vh;
  position: relative;
}

@media screen and (max-width: 1042px) {
  .bili-dyn-home--member {
    justify-content: flex-start;
    padding-left: 12px;
  }
}

@media screen and (min-width: 1140px) {
  main {
    width: 560px;
  }
}

@media screen and (min-width: 1320px) {
  main {
    width: 724px;
  }
}

.bgc {
  top: 0;
  height: 100vh;
  background-color: #d3e9e8;
}

.bg,
.bgc {
  pointer-events: none;
  z-index: 0;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background-image: url('../../assets/momentBg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg {
  bottom: 0;
  height: 56.25vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transition: 0.3s;
}
</style>
<style lang="scss">
/* 调整预览图片大小（保持比例） */
.el-image-viewer__img {
  width: auto !important;
  /* 按需调整百分比 */
  height: 50% !important;
}
</style>
